<script setup>
import FirstTitle from "@comp/FirstTitle";
import { postTableData } from "@/api/table";
import { onMounted } from "vue";
import { searchDataZymb } from "@/api/search";
import { addOrUpdateZymb } from "@/api/addOrUpdate";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const city = window.globalObj.name;

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  " 一是紧急加固，能对不能搬迁的目标采取有效措施紧急加固。二是搬迁转移，能把核心部位，重要设施、关键人员就地就近转入地下工程，把不能间断生产的设备转移到城郊或山区，把重大危险源分散转移到安全地区。三是隐真示假，能综合运用烟雾伪装、物理变形、迷彩遮障、电子偏移和设置假目标等方法手段，欺骗敌侦察监视，使敌难辨真假、误判目标。四是综合设障，能设置拦阻气球、空中钢索等空中障碍物，防敌临空突击。五是干扰诱偏，能通过施放箔条弹、设置角反射器、实施雷达干扰、GPS干扰、红外干扰、电子干扰等行动，抗敌空袭兵器的制导系统。每个重要目标单位均应建设1套与本单位目标防护相适的防护场所和防护设施（场所和防护设施数量、规模依目标防护需求确定）。应建设项目具体情况如下："
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  "重要目标关键部位建有地下工程的XX个、工程加固的XX个、转移场地的XX个、伪装设施的XX个、拦阻设施的XX个、干扰设施的XX个。"
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref([]);

// 重要目标防护场所和措施任务需求清单
const qdList = ref([]);
const getQdData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "zhongyaomubiaofanghunenglixuqiuList",
  }).then((res) => {
    if (res.code === 200) {
      qdList.value = res?.data || [];
    }
  });
};
// 重要目标防护场所和措施任务需求清单
const tjList = ref([]);
const getTjData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "zhongyaomubiaofanghujiansheqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      tjList.value = res?.data || [];
    }
  });
};
// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};
// 加载html
const initHtml = () => {
  searchDataZymb({
    m: "任务需求防护场所及防护措施手段任务需求和能力现状",
  }).then((res) => {
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "防护场所任务需求")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "防护场所能力现状")?.v || "";
  });
};
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateZymb({
      m: "任务需求防护场所及防护措施手段任务需求和能力现状",
      data: [
        {
          k: "防护场所任务需求",
          v: valueHtml10.value,
        },
        {
          k: "防护场所能力现状",
          v: valueHtml11.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getQdData();
  // await getTjData();
});

onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="任务需求" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 text-center">
      {{ city }}重要目标防护场所和措施任务需求清单
    </div>
    <el-table
      id="table"
      :data="qdList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: qdList.length,
          })
      "
    >
      <el-table-column prop="rowNum" label="序号" width="60" align="center" />
      <el-table-column prop="jd_name" label="行政区域" />
      <el-table-column prop="zyjjmbmc" label="重要目标单位名称" />
      <el-table-column prop="c3" label="项目">
        <el-table-column prop="dixigongcheng" label="关键部位地下工程" />
        <el-table-column prop="gongchengjiagu" label="关键部位工程加固" />
        <el-table-column prop="zhuanyichangdi" label="转移场地" />
        <el-table-column prop="yanwuweizhuang" label="烟雾伪装" />
        <el-table-column prop="bianxingzhezhang" label="变形遮障" />
        <el-table-column prop="dianzizhezhang" label="电子遮障" />
        <el-table-column prop="jiamubiao" label="假目标" />
        <el-table-column prop="lanzuqiuqiu" label="拦阻气球" />
        <el-table-column prop="kongzhonggangsuo" label="空中钢索" />
        <el-table-column prop="kongzhonglanwang" label="空中拦网" />
        <el-table-column prop="botiaodan" label="箔条弹" />
        <el-table-column prop="jiaofansheqi" label="角反射器" />
        <el-table-column prop="leidaganrao" label="雷达干扰" />
        <el-table-column prop="gps" label="GPS干扰" />
        <el-table-column prop="hongwaiganrao" label="红外干扰" />
        <el-table-column prop="dianziganrao" label="电子干扰" />
      </el-table-column>
    </el-table>

    <FirstTitle name="能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>